<template>
  <!-- 首页分类的组件 -->
  <view class="category-box">
    <view v-for="category in categoryList" :key="category.id">
      {{category.name}}  
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [
        {id: 1, name: 'Java'},
        {id: 2, name: '前端'},
        {id: 3, name: '云计算'},
        {id: 4, name: '运维'},
        {id: 5, name: '测试'},
        {id: 6, name: 'UI设计'},
        {id: 7, name: '人工智能'},
        {id: 8, name: '全部分类'},
      ]
    }
  }
}
</script>

<style lang="scss">
  .category-box {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 30rpx 0 30rpx;
    justify-content: space-around;
    >view {
      width: 160rpx;
      height: 70rpx;
      line-height: 70rpx;
      margin-top: 15rpx;
      text-align: center;
      background-color: $mxg-color-grey;
    }
  }
</style>
